<template>
  <div class="hotMessage">
    <div class="message-content">
      <!-- 搜索 -->
      <div class="message-search">
        <a-input class="search-input" v-model="searchWord" type="text" placeholder="请输入您要的搜索的内容"></a-input>
        <a-button class="search-btn">搜索</a-button>
      </div>
      <!-- 列表 -->
      <div class="message-list">
        <newList :newsList="newsList"></newList>
        <div class="scrollbar"></div>
      </div>
    </div>
  </div>
</template>

<script>
import newList from "@/components/base/newList";
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  components: {
    newList,
  },
  data() {
    return {
      searchWord: "",
      newsList: [
        {
          id: 1,
          title: "提振内需大合唱 擦亮城市新招牌提振内需大合唱 擦亮城市新招牌",
          pubdate: "2020-08-20 08:10:56",
          type: "热点信息",
          sitename: "新华网",
          source: "中国共产党新闻网",
          imgs: "",
          content:
            "企业家是经济活动的重要主体。改革开放以来，一大批优秀企业家在市场竞争中迅速成长，一大批具有核心竞争力的企业不断涌现，为积累社会财富、创造就业岗位、促进经济社会发展、增强综合国力作出了重要贡献。",
        },
        {
          id: 2,
          title:
            "提振内需大合唱 擦亮城市新招牌提振内需大合唱 擦亮城市新招牌振内需大合唱 擦亮城市新招牌...",
          pubdate: "2020-07-30 08:10:56",
          type: "政策法规",
          sitename: "发改委",
          source: "中国共产党新闻网",
          imgs:
            "https://p9.pstatp.com/list/190x124/pgc-image/d6edc92abc3a4a68a91a8427af94c0a1",
          content:
            "1小时前 - 新华社柏林5月11日电(记者张毅荣)德国施特拉尔松德孔子学院日前联合汉堡大学附属埃彭多夫医院汉萨美安中医中心,共同组织举办了数场中医抗击新。施特拉尔松德孔子学院日前联合汉堡大学附属埃施特拉尔松德孔子学院日前联合汉堡大学附属埃彭汉堡大学附属埃多夫施特拉尔松...",
        },
        {
          id: 3,
          title: "提振内需大合唱 擦亮城市新招牌提振内需大合唱 擦亮城市新招牌",
          pubdate: "2020-07-30 08:10:56",
          type: "热点信息",
          sitename: "新华网",
          source: "中国共产党新闻网",
          imgs: "",
          content:
            "企业家是经济活动的重要主体。改革开放以来，一大批优秀企业家在市场竞争中迅速成长，一大批具有核心竞争力的企业不断涌现，为积累社会财富、创造就业岗位、促进经济社会发展、增强综合国力作出了重要贡献。",
        },
        {
          id: 4,
          title:
            "提振内需大合唱 擦亮城市新招牌提振内需大合唱 擦亮城市新招牌振内需大合唱 擦亮城市新招牌...",
          pubdate: "2020-07-30 08:10:56",
          type: "合作数据",
          sitename: "发改委",
          source: "中国共产党新闻网",
          imgs:
            "https://p9.pstatp.com/list/190x124/pgc-image/d6edc92abc3a4a68a91a8427af94c0a1",
          content:
            "1小时前 - 新华社柏林5月11日电(记者张毅荣)德国施特拉尔松德孔子学院日前联合汉堡大学附属埃彭多夫医院汉萨美安中医中心,共同组织举办了数场中医抗击新。施特拉尔松德孔子学院日前联合汉堡大学附属埃施特拉尔松德孔子学院日前联合汉堡大学附属埃彭汉堡大学附属埃多夫施特拉尔松...",
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="stylus" scoped>
.hotMessage
  padding-right 8px
  height 100%
.message-content
  width 100%
  height 100%
  padding-left 16px
  .message-search
    margin 20px 0px
    .search-input
      width 32%
      max-width 292px
      min-width 292px
      height 34px
    .search-btn
      height 34px
      margin-left 14px
      background #1694cf
      color #ffffff
      border 0px
      font-size 14px
.message-list
  height calc(100% - 74px)
  overflow scroll
.scrollbar
  width 30px
  height 370px
  margin 0 auto
.message-list::-webkit-scrollbar /* 滚动条整体样式 */
  width 6px /* 高宽分别对应横竖滚动条的尺寸 */
  height 1px
.message-list::-webkit-scrollbar-thumb /* 滚动条里面小方块 */
  border-radius 10px
  // -webkit-box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
  background #E5E6E9
.message-list::-webkit-scrollbar-track /* 滚动条里面轨道 */
  // -webkit-box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
  border-radius 10px
  background #ffffff
</style>